<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title></title>
    {include file="common/pub_style" /}
    <script type="text/javascript" src="__PUBLIC__/plugin/clipboard/clipboard.js"></script>
    <style type="text/css">
        @media only screen and (max-width: 600px) {
            .recharge-content img {
                width: 100%
            }
        }
        .text-caption {
            font-size: .75rem;
            font-weight: 400;
            letter-spacing: .03333em;
            line-height: 1.25rem;
            width: 180px;
        }
        .copy {
            width: 35px;
            height: 35px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            isformnull();
            $(".login-btn").click(function() {
                if (getformnull() == 0) {
                    $("#loadingToast").show();
                    $.ajax({
                        type : 'post',
                        url : "",
                        dataType : "json",
                        data : $("form").serialize(),
                        success : function(res) {
                            layer.msg(res.msg);
                            if (res.code == 99) {
                                $("form").get(0).reset();
                                window.location.href = "{:url('recode')}";
                            }
                            $("#loadingToast").hide();
                        }
                    });
                }
            })

            var clipboard = new ClipboardJS('#copy', {
                text : function(trigger) {
                    layer.msg("{$Think.lang.copy_success}");
                    return trigger.getAttribute('data-text');
                }
            });
            var type = $("#type").val();

            $("#type").change(function() {
                type = $("#type").val();

            })
        })

    </script>
</head>
<body>
<div class="header-wrap">
    <div class="flex flex-between pd10">
        <div class="left-arrow" onclick='javascript:window.location.href="{:url('User/index')}"'></div>
    <div class="">{$Think.lang.label_recharge}</div>
    <div class="">
        <a href="{:url('recode')}">{$Think.lang.recode}</a>
    </div>
</div>
</div>
<div style="height: 70px;"></div>
<div class=" pd20">
        <div class="form-row flex flex-between align-center index">
            <div class="title label-md">{$Think.lang.type}:</div>
            <div class="input-box" >
                <div class="position-rel">
                    <div  class="bank_xljt1" style="height: 50px;"  id="chose_bank" >
                        <a href="javascript:;" class="hotBank-list-ico" id="t3">
                            <img  class="jt_xz" id="t2" src="__PUBLIC__/image/trc20.png" width="50" />
                            <span class="tit" id="t1">TRC20-USDT</span>
                            <input type="hidden" id="type" name="type" value="trc20">
                        </a>
                    </div>
                </div>
                <div class="bank_xl" style="display: none;position: absolute;top: 97px;left: 15%;">
                    <ul>
                        <li class="hotBank-list" onclick="sel(1)">
                            <a href="javascript:" class="hotBank-list-ico">
                                <img  src="__PUBLIC__/image/trc20.png" width="50" />
                                <span id="tits">TRC20</span>
                            </a>
                        </li>
                        <li class="hotBank-list" onclick="sel(2)">
                            <a href="javascript:" class="hotBank-list-ico">
                                <img src="__PUBLIC__/image/erc20.png" width="50" />
                                <span id="tits">ERC20</span>
                            </a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>

        <style type="text/css" media="all">
            li{list-style: none;}
            .bank_xl{background-color: #fff;width: 60%;}
            #tits{color: #141313;}
            .hotBank-list{margin-top:5px ;}
            .changeState{
                width:172px;
                height:32px;
                position:relative;
                .bank_xl{
                    width: 100%;
                    border: 1px  solid  #ccc;
                    position: absolute;
                    z-index: 1;
                    background: #ffffff;
                    border-top: 0;
                    ul{
                        padding: 0;
                        margin:0;
                        li{
                            padding-left: 10px;
                            list-style: none;
                            a{
                                display: block;
                                width: 100%;
                                line-height: 30px;
                                font-size: 12px;
                                color: #666;
                                img{
                                    margin-right: 10px;
                                }
                            }
                        }
                    }
                }
                .position-rel {
                    position: relative;
                    height:32px;
                    border:1px solid #ddd;
                }
                .bank_xljt{
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 50px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                }
                .bank_xljt1{
                    height: 32px;
                    position: absolute;
                    width: 100%;
                    top: 0px;
                    .hotBank-list-ico {
                        display: block;
                        line-height: 30px;
                        padding-left: 10px;
                        color: #666;
                        font-size: 12px;
                        img{
                            margin-right: 10px;
                        }
                    }
                }
            }
        </style>
        <div class="form-row flex flex-between align-center">
            <div class="title label-md">{$Think.lang.qr_code}:</div>
            <div class="flex flex-block align-center">
                <div class="input-box">
                    <img src="{$data['qr']}" class="qr_img" width="100">
                    <br>
                </div>

            </div>
        </div>

        <div class="flex flex-between align-center">
<!--            <div class="title label-md">{$Think.lang.address}:</div>-->
            <div class="input-box align-center flex" style="width: 100%;display: block; background-color: #EBFAF6;color: #00BF8B;line-height: 28px;text-align: center;">
                <div class=" text-green q-mt-xs q-mr-md wallet_key">{$data.address}</div>
<!--                <input type="text" class="form-control czjine" id="firstname" name="money" disabled  value="" placeholder="{$Think.lang.recharge_minimum}" autocomplete="off">-->
            </div>

        </div>
        <div class="form-row">
            <button type="button" class="input-btn" id="copy" data-text="{$data.address}">
					<span class="btn-content">
						<span>复制</span>
					</span>
            </button>
        </div>
<!--        <img src="__PUBLIC__/image/copy.png" class="copy flex" data-text="{$data.address}">-->
     <div class="form-row flex flex-between align-center">
            <div class="title label-md">{$Think.lang.amount}:</div>
            <div class="input-box">
                请支付 {$data.money} USDT
<!--                <input type="text" class="form-control czjine" id="firstname" name="money" disabled  value="" placeholder="{$Think.lang.recharge_minimum}" autocomplete="off">-->
            </div>
        </div>


    <span>{$Think.lang.label_biaoti}</span>
    <div class="">

        <label for="firstname" class="control-label" style="color: #6046ff"></label></BR>
        <label for="firstname" class="control-label" style="color: red"></label>
        <div class="recharge-content">{$website.recharge_example|raw}</div>
    </div>
</div>
{include file="common/footer" /}
</body>
</html>